<template>
	<view :style="containerStyle">
		<view id="generate-wrap" class="draw-pic-wrap" :class="{ 'generate-wrap': generate }" :style="wrapStyle">
			<view class="draw-wrap">
				<view class="draw-list" @click="review">
					<view v-for="(item, index) in generateData.list">
						<view :key="index" class="draw-item" :class="{ 'pic-layer': item.type && item.type == 'img' }"
							:style="getItemStyle(item)" v-if="item">
							<view class="pic-layer" v-if="item.type && item.type == 'img'">
								<image :src="getURL(item.url)" mode="aspectFill" />
							</view>
							<view>
								<view class="wrap-text" :class="{ 'wrap-pre': item.type == 'customFont' }"
									v-if="item.type != 'photo' && item.type != 'customImg'"
									:style="getItemTextStyle(item)">
									{{ item.options.defaultValue }}
								</view>
								<view class="wrap-photo flex-wrap flex-middle"
									v-else-if="item.type == 'photo' && item.options.defaultValue == '获得者头像'"
									:style="getItemPhotoStyle(item)">
									头像
								</view>
								<view class="wrap-photo flex-wrap flex-middle"
									v-else-if="item.type === 'photo' && item.options.defaultValue === '/hklearn/dist/_nuxt/img/3c35605.png' && generateData.userInfo"
									:style="getItemPhotoStyle(item)">
									<generate-photo
										:width="item.options.width > item.options.height ? item.options.height : item.options.width"
										:id="generateData.userInfo.id"
										:text="generateData.userInfo.realName"></generate-photo>
								</view>
								<view class="wrap-photo flex-wrap flex-middle" v-else-if="item.type === 'photo'"
									:style="getItemPhotoStyle(item)">
									<image :src="item.options.defaultValue" mode="aspectFill" />
								</view>
								<view class="wrap-photo flex-wrap flex-middle" v-else :style="getItemPhotoStyle(item)">
									<image :src="item.options.defaultValue" mode="aspectFill" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
import {
	computed,
	onMounted
} from 'vue';
import generatePhoto from "@/components/dragMaker/generatePhoto";
import {
	stringify
} from "@/assets/js/util";
const props = defineProps({
	generate: {
		type: Boolean,
		default: false
	},
	generateData: {
		type: Object,
		default: () => ({})
	},
	padding: {
		type: Number,
		default: 0
	}
});

const emit = defineEmits(['review']);
const review = () => {
	emit('review');
}
const deviceWidth = computed(() => {
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	return windowWidth - props.padding;
});

const containerStyle = computed(() => ({
	width: `${deviceWidth.value * (props.generateData.drawWidth / props.generateData.drawWidth)}px`,
	height: `${props.generateData.drawHeight * (deviceWidth.value / props.generateData.drawWidth)}px`
}));

const wrapStyle = computed(() => ({
	width: `${props.generateData.drawWidth}px`,
	height: `${props.generateData.drawHeight}px`,
	transform: `scale(${deviceWidth.value / props.generateData.drawWidth})`
}));

const getItemStyle = (item) => {
	return {
		left: `${item.options.left}px`,
		top: `${item.options.top}px`,
		transform: `rotate(${item.options.deg}deg)`,
		zIndex: item.options.zIndex
	};
};

const getItemTextStyle = (item) => {
	return {
		width: `${item.options.width}px`,
		fontSize: `${item.options.fontSize}px`,
		color: item.options.fontColor,
		fontWeight: item.options.fontWeight,
		lineHeight: item.options.lineHeight,
		fontFamily: item.options.fontFamily,
		fontStyle: item.options.fontStyle,
		textDecoration: item.options.underline,
		textAlign: item.options.fontAlign
	};
};

const getItemPhotoStyle = (item) => {
	return {
		width: `${item.options.width}px`,
		height: `${item.options.height}px`
	};
};

const getURL = (url) => {
	if (url.indexOf('http') >= 0) {
		return url;
	} else {
		return `${uni.getStorageSync('domainProtocol')}${uni.getStorageSync('domainPath')}${url}`;
	}
}

</script>

<style lang="scss" scoped>
.draw-pic-wrap {
	background: #fff;
	margin: 0 auto;
	position: relative;
	transform-origin: left top;

	.ghost {
		display: none;
	}

	.draw-wrap {
		position: relative;
		height: 100%;
		z-index: 2;
	}

	.draw-list {
		position: relative;
		height: 100%;
		z-index: 2;
	}

	.draw-item {
		position: absolute;
		z-index: 1;

		&.pic-layer,
		.pic-layer {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			z-index: -1;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.wrap-text {
			padding: 5px;

			&.wrap-pre {
				white-space: pre-wrap;
			}
		}

		.wrap-photo {
			background-size: contain !important;
		}

		.el-icon-error {
			color: #F56C6C;
			position: absolute;
			font-size: 18px;
			top: -15px;
			right: -15px;
			z-index: 3;
			cursor: pointer;
		}
	}
}
</style>